<template>
  <base-breadcrumb
    title=""
  >
    <a-form @submit="handleSubmit" :form="form">
      <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <div class="title-name">多页标签</div>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-button @click="handleOpenLoading">加载</a-button>
        </a-row>

        <Analysis></Analysis>

      </a-card>



    </a-form>
  </base-breadcrumb>
</template>

<script>
  // 演示如何使用 this.$dialog 封装 modal 组件
  import Analysis from '../../profile/advanced/Advanced'


  export default {
    name:'a'+Date.now(),
    components: {
      Analysis,
    },
    data() {
      return {
        previewVisible: false,
        previewImage: '',


        headers: {
          authorization: 'authorization-text',
        },
        queryParam: {
          projectName: '',
          name: ''
        },
        form: this.$form.createForm(this),
        status: 'all'
      }
    },
    methods: {
      handleOpenLoading () {
        this.$nextTick(function () {
          console.log('this', this)
          console.log('this.$refs.tInput', this.$refs.tInput)
        })
        this.$loading.show({ tip: '加载中...' })
        setTimeout(() => {
          this.$loading.hide()
        }, 5000)
      },
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$notification['error']({
              message: 'Received values of project:',
              description: values
            })
          }
        })
      },


      edit(record) {
        console.log('record', record)
        this.$dialog(TaskForm,
          // component props
          {
            record,
            on: {
              ok() {
                console.log('ok 回调')
              },
              cancel() {
                console.log('cancel 回调')
              },
              close() {
                console.log('modal close 回调')
              }
            }
          },
          // modal props
          {
            title: '操作',
            width: 700,
            centered: true,
            maskClosable: false
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .wrapper-row{
    padding-left: 55px;
    font-weight: bold;
    letter-spacing: 1px;
  }
  /deep/ .ant-btn{
    border-radius: 5px;
  }
  /deep/ .ant-calendar-picker-input.ant-input{
    width: 100%;
  }
  /deep/ .ant-input{
    width: 70%;
    border-radius: 5px;
  }
  /deep/ .ant-calendar-picker{
    width: 70%;
    border-radius: 5px;
  }
  /deep/ .ant-card.ant-card-bordered{
    border-radius: 5px;
  }
  .ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 40px;
    span {
      line-height: 20px;
    }
    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }

  .title-name {
    border-left: 5px solid #1890ff;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 15px;
    height: 20px;
    line-height: 20px;
  }

  /deep/ .table-page-search-wrapper .ant-form-inline .ant-row .ant-col.ant-col-sm-24.ant-col-md-12 {
    padding-left: 80px;
  }
</style>
